import React, { Component } from 'react'
import './NavList.scss'
import axios from 'axios'
import {withRouter} from 'react-router-dom'
class NavList extends Component {
    state = {
        navList: []
    }
    componentDidMount() {
        axios.get('./json/NavList.json').then(res => {
            let navList = res.data.data[140653].list
            // // 过滤掉最后一个
            navList = navList.filter((item) => {
                return item.sort < 17
            })
            this.setState({ navList })
        })
    }
    // 进行页面跳转
    goToList=(index) => {
        if(index!==0){
            // 跳转首页列表详情页面
            this.props.history.push('/navlistdetails/'+index)
        }else{
            // 跳转新人分享页面
            this.props.history.push('/newshare')
        }
    }
    render() {
        return (
            <div className='navList'>
                {
                    this.state.navList.map((v,i) => {
                        return (
                            <div className='navList-item' key={v.sort} onClick={this.goToList.bind(this,i)}>
                                <div className='item-img'>
                                    <img src={v.image} alt="" />
                                </div>
                                <div className='item-tit'>{v.title}</div>
                            </div>
                        )
                    })
                }
            </div>
        )
    }
}
export default withRouter(NavList)